<template>
  <div class="bruce">
    <ul class="bubble-bgwall">
      <li>General</li>
      <li>General</li>
      <li>General</li>
      <li>General</li>
      <li>General</li>
      <li>General</li>
      <li>General</li>
      <li>General</li>
      <li>General</li>
      <li>General</li>
    </ul>
  </div>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>欢迎回来, {{ currentUser.username }}</h1>
      <button @click="logout" class="logout-button">退出登录</button>
    </div>
    <div class="dashboard-main">
      <aside class="dashboard-sidebar">
        <div
          v-for="item in features"
          :key="item.key"
          :class="['sidebar-item', { active: item.key === selectedFeature }]"
          @click="selectFeature(item.key)"
        >
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </div>
      </aside>
      <section class="dashboard-content">
        <component :is="currentPanel" />
      </section>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { computed, ref } from 'vue';
import UserPanel from './dashboard/UserPanel.vue';
import RolePanel from './dashboard/RolePanel.vue';
import StatsPanel from './dashboard/StatsPanel.vue';
import NotifyPanel from './dashboard/NotifyPanel.vue';
import SettingsPanel from './dashboard/SettingsPanel.vue';
import ContentPanel from './dashboard/ContentPanel.vue';
import FilePanel from './dashboard/FilePanel.vue';
import LogPanel from './dashboard/LogPanel.vue';
import ProfilePanel from './dashboard/ProfilePanel.vue';
import HelpPanel from './dashboard/HelpPanel.vue';

export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    const currentUser = computed(() => {
      const user = store.state.user;
      return user ? user : { username: 'Guest' };
    });

    // 功能列表
    const features = [
      { key: 'stats', title: '数据统计', desc: '查看关键业务数据', icon: 'fas fa-chart-bar', panel: StatsPanel },
      { key: 'user', title: '用户管理', desc: '管理系统用户信息', icon: 'fas fa-users', panel: UserPanel },
      { key: 'role', title: '角色权限', desc: '分配和管理角色权限', icon: 'fas fa-user-shield', panel: RolePanel },
      { key: 'notify', title: '消息通知', desc: '系统消息与提醒', icon: 'fas fa-bell', panel: NotifyPanel },
      { key: 'settings', title: '系统设置', desc: '配置系统参数', icon: 'fas fa-cogs', panel: SettingsPanel },
      { key: 'content', title: '内容管理', desc: '管理网站内容', icon: 'fas fa-file-alt', panel: ContentPanel },
      { key: 'file', title: '文件管理', desc: '上传与管理文件', icon: 'fas fa-folder-open', panel: FilePanel },
      { key: 'log', title: '日志审计', desc: '系统操作日志', icon: 'fas fa-clipboard-list', panel: LogPanel },
      { key: 'profile', title: '个人中心', desc: '修改个人信息', icon: 'fas fa-user-circle', panel: ProfilePanel },
      { key: 'help', title: '帮助中心', desc: '常见问题与支持', icon: 'fas fa-question-circle', panel: HelpPanel },
    ];

    // 当前选中的功能
    const selectedFeature = ref(features[0].key);
    const currentPanel = computed(() => {
      const found = features.find(f => f.key === selectedFeature.value);
      return found ? found.panel : null;
    });

    const selectFeature = (key) => {
      selectedFeature.value = key;
    };

    const logout = () => {
      store.dispatch('logout');
      router.push('/');
    };

    return {
      currentUser,
      logout,
      features,
      selectedFeature,
      selectFeature,
      currentPanel
    };
  }
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: #f5f7fa;
  min-height: 100vh;
}

/* 仪表盘容器 */
.dashboard {
  max-width: 1400px;
  margin: 32px auto 0 auto;
  padding: 0 32px 32px 32px;
  background: linear-gradient(135deg, #f5f7fa 60%, #e3f0ff 100%);
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(25, 118, 210, 0.08);
}

/* 仪表盘头部 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
  padding: 32px 0 18px 0;
  border-bottom: 1.5px solid #e3e8ee;
  background: none;
}

.dashboard-header h1 {
  font-size: 28px;
  color: #1976d2;
  font-weight: 700;
  letter-spacing: 1px;
}

.logout-button {
  padding: 10px 22px;
  background: linear-gradient(90deg, #f44336 60%, #ff7961 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(244,67,54,0.08);
  transition: background 0.3s, box-shadow 0.2s;
}

.logout-button:hover {
  background: linear-gradient(90deg, #d32f2f 60%, #ff7961 100%);
  box-shadow: 0 4px 16px rgba(244,67,54,0.15);
}

/* 仪表盘主体 */
.dashboard-main {
  display: flex;
  min-height: 600px;
  margin-top: 18px;
}

.dashboard-sidebar {
  width: 230px;
  background: linear-gradient(135deg, #e3f0ff 80%, #f5f7fa 100%);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(25,118,210,0.06);
  padding: 24px 0;
  margin-right: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid #e3e8ee;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 14px 28px;
  font-size: 17px;
  color: #1976d2;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 rgba(25,118,210,0);
}

.sidebar-item i {
  font-size: 22px;
  margin-right: 14px;
}

.sidebar-item.active, .sidebar-item:hover {
  background: linear-gradient(90deg, #1976d2 20%, #90caf9 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(25,118,210,0.10);
}

/* 仪表盘内容 */
.dashboard-content {
  flex: 1;
  background: #fff;
  padding: 44px 40px 36px 40px;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(25, 118, 210, 0.07);
  min-height: 500px;
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.dashboard-content h2 {
  font-size: 24px;
  color: #1976d2;
  margin-bottom: 12px;
}

.dashboard-content p {
  color: #666;
  font-size: 15px;
}

@media (max-width: 900px) {
  .dashboard-main {
    flex-direction: column;
  }
  .dashboard-sidebar {
    width: 100%;
    flex-direction: row;
    margin-right: 0;
    margin-bottom: 18px;
    gap: 0;
    overflow-x: auto;
    border-radius: 8px;
  }
  .sidebar-item {
    flex: 1;
    justify-content: center;
    padding: 12px 0;
    font-size: 15px;
  }
  .dashboard-content {
    padding: 24px 10px;
  }
}

/* 气泡背景样式 */
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.bruce {
  height: 100%;
  background-image: linear-gradient(270deg, #8146b4, #6990f6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.bubble-bgwall {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.bubble-bgwall li {
  display: flex;
  position: absolute;
  bottom: -200px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ccc;
  font-size: 16px;
  animation: bubble 15s infinite;
  user-select: none;
}

.bubble-bgwall li:nth-child(1) {
  left: 10%;
}

.bubble-bgwall li:nth-child(2) {
  left: 20%;
  width: 90px;
  height: 90px;
  animation-duration: 7s;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background-color: rgba(255,255,255,0.3);
  animation-duration: 8s;
}

.bubble-bgwall li:nth-child(5) {
  left: 70%;
}

.bubble-bgwall li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  background-color: rgba(255,255,255,0.2);
  animation-delay: 3s;
}

.bubble-bgwall li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(8) {
  left: 55%;
  width: 40px;
  height: 40px;
  font-size: 12px;
  animation-duration: 15s;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(9) {
  left: 25%;
  width: 40px;
  height: 40px;
  background-color: rgba(255,255,255,0.3);
  font-size: 12px;
  animation-duration: 12s;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(10) {
  left: 85%;
  width: 160px;
  height: 160px;
  animation-delay: 5s;
}

@keyframes bubble {
  0% { opacity: 0.5; transform: translateY(0) rotate(45deg); }
  25% { opacity: 0.75; transform: translateY(-400px) rotate(90deg); }
  50% { opacity: 1; transform: translateY(-600px) rotate(135deg); }
  100% { opacity: 0; transform: translateY(-1000px) rotate(180deg); }
}
</style>
